<template>
  <div class="login-section">
    <n-space vertical>
      <n-gradient-text type="info" class="title"> 鲸语登录 </n-gradient-text>
      <div class="gap" style="border-top: 1px solid #369bc7"></div>
      <n-form
        :model="formValue"
        :rules="rules"
        ref="formRef"
        :show-label="false"
      >
        <div class="gap"></div>
        <div class="gap"></div>
        <n-form-item path="email">
          <n-input
            placeholder="邮箱"
            round
            size="large"
            v-model:value="formValue.email"
          >
            <template #prefix>
              <n-icon>
                <flash-outline />
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item path="password">
          <n-input
            type="password"
            show-password-toggle
            placeholder="密码"
            :maxlength="8"
            round
            size="large"
            v-model:value="formValue.password"
            @keyup.enter="sendLoginRequest"
          >
            <template #prefix>
              <n-icon>
                <flash-outline />
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
        <div class="gap"></div>
        <n-form-item>
          <n-button size="large" @click="sendLoginRequest" block type="primary">
            登&nbsp;录
          </n-button>
        </n-form-item>
      </n-form>
      <n-space justify="center" class="back">
        <n-gradient-text
          @click="$emit('before')"
          :gradient="{ from: '#ffa364', to: '#ff7416' }"
        >
          前往注册→
        </n-gradient-text>
      </n-space>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { FlashOutline } from '@vicons/ionicons5';
import { ref, reactive, onMounted } from 'vue';
import { User } from '@api/user';

import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';

const store = useStore();
const router = useRouter();
const message = useMessage();

const formRef = ref(null);
const formValue = reactive({
  email: '',
  password: '',
});
const rules = {
  email: [
    {
      required: true,
      message: '请输入邮箱',
    },
    {
      validator: validateEmail,
      message: '请输入正确的邮箱',
      trigger: 'blur',
    },
  ],
  password: {
    required: true,
    message: '请输入密码',
    trigger: ['blur'],
  },
};

//邮箱验证
function validateEmail(rule: any, value: any) {
  const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  return formValue.email && reg.test(formValue.email);
}
//登录
const sendLoginRequest = (e: any) => {
  (formRef.value as any).validate((errors: any) => {
    if (!errors) {
      User.login({
        email: formValue.email,
        password: formValue.password,
      }).then((res: any) => {
        console.log('res: ', res);
        if (res.data.status === 200) {
          message.success('登录成功');
          store.commit('updateAuth', {
            auth: res.data.data.token,
            userInfo: res.data.data.userInfo,
          });
          router.push('/home');
        } else {
          message.error('登录失败，请检查一下账号密码');
        }
      });
    }
  });
};

const boxWidth = ref('22vw');
onMounted(() => {
  resize();
  window.onresize = () => {
    return (() => {
      resize();
    })();
  };
});
// 响应式 宽度
const resize = () => {
  boxWidth.value =
    document.body.clientWidth > 1080
      ? '22vw'
      : document.body.clientWidth > 650
      ? '45vw'
      : '80vw';
};
</script>

<style scoped lang="scss">
.login-section {
  padding: 8%;
  button {
    margin-top: 1vh;
  }
}
.gap {
  height: 2vh;
  width: 70%;
}
.title {
  font-size: 1.8rem;
  font-weight: 600;
}
.back {
  margin: 0 auto;
  font-size: 1rem;
  cursor: pointer;
  .n-gradient-text {
    font-weight: 600 !important;
  }
}
</style>
